<div class="body" @contextmenu.stop="showOption($event, 'body')">
    <div class="flex flex-start">
        <div class="flex-item-1 search-section h-section">
            <a class="search-banner" href="//baidu.com">
                <img src="/assets/img/baidu_banner.png">
            </a>
            <form class="form-group search flex" action="//baidu.com/s">
                <input type="search" name="wd" class="form-control" autocomplete="off">
                <button type="submit" class="btn btn-default">
                    <i class="xcon xcon-search"></i>
                </button>
            </form>
        </div>
        <div class="flex-item-1 flex weather-section h-section">
            <div v-if="weather.now" class="weather-item">
                <img :src="weather.now.img">
                <p>
                    {{ weather.city_name }}
                    {{ weather.now.text.replace('/', '~') }}
                    {{ weather.now.temperature }}℃
                </p>
            </div>
        </div>
    </div>
    <div class="flex link-section" style="margin-left: -10px; margin-right: -10px;">
        <div v-for="(link, index) in linkList" class="flex-item" style="width: 25%;">
            <a :href="link.link"
                class="link-item"
                style="margin: 0 10px 20px;"
                @contextmenu.stop="showOption($event, 'link', index)"
                >
                <div class="link-item-content">
                    <img :src="link.thumbnail || favicon(link.link)">
                    <span class="link-title">{{ link.linkTitle }}</span>
                </div>
            </a>
        </div>
        <div class="flex-item" style="width: 25%;" v-show="linkAdderShowing">
            <a class="link-adder" style="margin: 0 10px 20px;" @click="editLink(false)">
                <i class="xcon xcon-ca-add"></i>
            </a>
        </div>
    </div>

    <div v-show="opManager.visible.link" class="context-menu" :style="opManager.style" ref="linkOptionEl">
        <!-- <ul class="context-menu-list">
            <li>
                <a class="context-menu-item">占位</a>
            </li>
        </ul> -->
        <ul class="context-menu-list">
            <li>
                <a class="context-menu-item" @click="editLink">编辑</a>
            </li>
            <li>
                <a class="context-menu-item" @click="deleteLink(linkChosen.index)">删除</a>
            </li>
        </ul>
    </div>

    <div v-show="opManager.visible.body" class="context-menu" :style="opManager.style" ref="bodyOptionEl">
        <ul class="context-menu-list">
            <li>
                <a class="context-menu-item" @click="toggleLinkAdder">{{ linkAdderShowing ? '隐藏' : '展示' }}
                    <i class="xcon xcon-ca-add"></i> 按键
                </a>
            </li>
        </ul>
    </div>

    <v-modal :showing.sync="linkModalShowing" :middle="true" :dialogForm="true" @submit.prevent="saveLink">
        <template slot="header">{{ linkChosen ? '编辑' : '添加' }}链接</template>
        <template slot="body">
            <div class="form-group">
                <label class="form-label">网址</label>
                <input class="form-control" type="text" v-model="linkEditor.link" @blur="autoFillLink" placeholder="输入网址">
            </div>
            <div class="form-group">
                <label class="form-label">标题</label>
                <input class="form-control" type="text" v-model="linkEditor.linkTitle" placeholder="输入标题">
            </div>
            <div class="form-group">
                <label class="form-label">自定义缩略图</label>
                <input class="form-control" type="text" v-model="linkEditor.thumbnail" placeholder="输入图片地址">
            </div>
        </template>
        <template slot="footer">
            <a class="btn btn-default" @click="linkModalShowing = false">取消</a>
            <button type="submit" class="btn btn-primary">保存</button>
        </template>
    </v-modal>
</div>
